document.addEventListener('DOMContentLoaded', function() {
    // 初始化图表
    updateChart();

    // 绑定更新按钮事件
    document.getElementById('update-chart').addEventListener('click', updateChart);

    function updateChart() {
        const pollutants = Array.from(document.getElementById('pollutant-select').selectedOptions)
            .map(option => option.value);
        
        const startHour = parseInt(document.getElementById('hours-start').value) || 1;
        const endHour = parseInt(document.getElementById('hours-end').value) || 24;

        // 过滤数据
        const filteredData = predictions.filter(p => 
            p.hours_ahead >= startHour && p.hours_ahead <= endHour);

        // 准备图表数据
        const chartData = pollutants.map(pollutant => ({
            x: filteredData.map(p => p.timestamp),
            y: filteredData.map(p => p[pollutant]),
            name: pollutant,
            type: 'line'
        }));

        // 绘制图表
        Plotly.newPlot('main-chart', chartData, {
            title: '污染物浓度趋势',
            xaxis: { title: '时间' },
            yaxis: { title: '浓度值' },
            margin: { t: 40, l: 50, r: 30, b: 80 }
        });
    }
});